<template>
  <view class="container">
    <view class="header">
      <view class="header-decoration">
      </view>
      <text class="title">亲戚计算器</text>
      <text class="subtitle">快速计算复杂的亲戚关系称谓，让您在家庭聚会中不再尴尬</text>
    </view>
    
    <view class="content">
      <view class="calculator-card">
        <view class="card-title">
          <text>关系计算器</text>
          <button class="share-btn" open-type="share">分享给好友</button>
        </view>
        
        <view class="relation-container">
          <view class="relation-path">
            <view class="relation-item" v-for="(item, index) in relationPath" :key="index">
              <text class="relation-text">{{ item }}</text>
              <text class="relation-arrow" v-if="index < relationPath.length - 1">→</text>
            </view>
          </view>
          
          <view class="result-display" v-if="resultRelation">
            <text class="result-label">计算结果：</text>
            <text class="result-value">{{ resultRelation }}</text>
          </view>
        </view>
        
        <view class="relation-selector">
          <view class="selector-title">选择关系</view>
          <view class="relation-buttons">
            <button 
              v-for="(relation, index) in commonRelations" 
              :key="index" 
              class="relation-btn"
              @click="addRelation(relation)">
              {{ relation }}
            </button>
          </view>
        </view>
        
        <view class="action-buttons">
          <button class="btn-action btn-clear" @click="clearRelations">清空</button>
          <button class="btn-action btn-delete" @click="removeLastRelation">删除</button>
          <button class="btn-action btn-calculate" @click="calculateRelation">计算关系</button>
        </view>
      </view>
      
      <view class="info-card">
        <view class="card-title">
          <text>使用说明</text>
        </view>
        
        <view class="info-content">
          <text class="info-text">1. 从"我"的角度出发，依次选择关系链</text>
          <text class="info-text">2. 例如：计算"我爸爸的妹妹"是什么关系</text>
          <text class="info-text">3. 依次点击"爸爸"、"妹妹"按钮</text>
          <text class="info-text">4. 点击"计算关系"按钮，得到结果"姑姑"</text>
          <text class="info-text">5. 支持最多8层关系计算</text>
        </view>
      </view>
      
      <view class="common-relations-card">
        <view class="card-title">
          <text>常见亲戚关系表</text>
        </view>
        
        <view class="relations-table">
          <view class="relation-row" v-for="(item, index) in relationExamples" :key="index">
            <text class="relation-example-path">{{ item.path }}</text>
            <text class="relation-example-result">{{ item.result }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="disclaimer">
      本计算器基于中国传统亲属称谓体系，仅供参考。不同地区可能存在称谓差异。
    </view>
  </view>
  <FloatButton />
</template>

<script>
import FloatButton from '@/components/FloatButton.vue'
import { getShareAppMessageConfig, getShareTimelineConfig } from '../../utils/share.js';

export default {
  components: {
    FloatButton
  },
  data() {
    return {
      relationPath: [],
      resultRelation: '',
      commonRelations: [
        '爸爸', '妈妈', '哥哥', '姐姐', '弟弟', '妹妹', 
        '儿子', '女儿', '丈夫', '妻子', '爷爷', '奶奶',
        '外公', '外婆', '叔叔', '阿姨', '舅舅', '姑姑'
      ],
      relationExamples: [],
      // 亲戚关系映射表
      relationMap: {
        // 基础关系
        '爸爸': { male: '爸爸', female: '妈妈' },
        '妈妈': { male: '爸爸', female: '妈妈' },
        '哥哥': { male: '哥哥', female: '姐姐' },
        '姐姐': { male: '哥哥', female: '姐姐' },
        '弟弟': { male: '弟弟', female: '妹妹' },
        '妹妹': { male: '弟弟', female: '妹妹' },
        '儿子': { male: '儿子', female: '女儿' },
        '女儿': { male: '儿子', female: '女儿' },
        '丈夫': { male: '丈夫', female: '妻子' },
        '妻子': { male: '丈夫', female: '妻子' },
        
        // 直系亲属关系
        '爸爸,爸爸': '爷爷',
        '爸爸,妈妈': '奶奶',
        '妈妈,爸爸': '外公',
        '妈妈,妈妈': '外婆',
        '儿子,儿子': '孙子',
        '儿子,女儿': '孙女',
        '女儿,儿子': '外孙子',
        '女儿,女儿': '外孙女',
        
        // 旁系亲属关系
        '爸爸,哥哥': '伯父',
        '爸爸,弟弟': '叔叔',
        '爸爸,姐姐': '姑姑',
        '爸爸,妹妹': '姑姑',
        '妈妈,哥哥': '舅舅',
        '妈妈,弟弟': '舅舅',
        '妈妈,姐姐': '阿姨',
        '妈妈,妹妹': '阿姨',
        
        // 配偶关系
        '爸爸,妻子': '妈妈',
        '妈妈,丈夫': '爸爸',
        '爷爷,妻子': '奶奶',
        '奶奶,丈夫': '爷爷',
        '外公,妻子': '外婆',
        '外婆,丈夫': '外公',
        '伯父,妻子': '伯母',
        '叔叔,妻子': '婶婶',
        '姑姑,丈夫': '姑父',
        '舅舅,妻子': '舅妈',
        '阿姨,丈夫': '姨父',
        
        // 兄弟姐妹的子女
        '哥哥,儿子': '侄子',
        '哥哥,女儿': '侄女',
        '弟弟,儿子': '侄子',
        '弟弟,女儿': '侄女',
        '姐姐,儿子': '外甥',
        '姐姐,女儿': '外甥女',
        '妹妹,儿子': '外甥',
        '妹妹,女儿': '外甥女',
        
        // 长辈关系
        '爷爷,爸爸': '曾祖父',
        '奶奶,爸爸': '曾祖父',
        '外公,爸爸': '外曾祖父',
        '外婆,爸爸': '外曾祖父',
        '爷爷,妈妈': '曾祖母',
        '奶奶,妈妈': '曾祖母',
        '外公,妈妈': '外曾祖母',
        '外婆,妈妈': '外曾祖母',
        
        // 长辈的子女
        '爷爷,儿子': '伯父/叔叔',
        '奶奶,儿子': '伯父/叔叔',
        '外公,儿子': '舅舅',
        '外婆,儿子': '舅舅',
        '爷爷,女儿': '姑姑',
        '奶奶,女儿': '姑姑',
        '外公,女儿': '阿姨',
        '外婆,女儿': '阿姨',
        
        // 堂表亲关系
        '伯父,儿子': '堂哥/堂弟',
        '伯父,女儿': '堂姐/堂妹',
        '叔叔,儿子': '堂哥/堂弟',
        '叔叔,女儿': '堂姐/堂妹',
        '姑姑,儿子': '表哥/表弟',
        '姑姑,女儿': '表姐/表妹',
        '舅舅,儿子': '表哥/表弟',
        '舅舅,女儿': '表姐/表妹',
        '阿姨,儿子': '表哥/表弟',
        '阿姨,女儿': '表姐/表妹',
        
        // 三级关系映射
        '爸爸,爸爸,爸爸': '曾祖父',
        '爸爸,爸爸,妈妈': '曾祖母',
        '妈妈,爸爸,爸爸': '外曾祖父',
        '妈妈,爸爸,妈妈': '外曾祖母',
        '爸爸,妈妈,爸爸': '曾祖父',
        '爸爸,妈妈,妈妈': '曾祖母',
        '妈妈,妈妈,爸爸': '外曾祖父',
        '妈妈,妈妈,妈妈': '外曾祖母',
        
        // 孙辈关系
        '孙子,儿子': '曾孙',
        '孙女,儿子': '曾孙',
        '外孙子,儿子': '外曾孙',
        '外孙女,儿子': '外曾孙',
        '孙子,女儿': '曾孙女',
        '孙女,女儿': '曾孙女',
        '外孙子,女儿': '外曾孙女',
        '外孙女,女儿': '外曾孙女',
        
        // 侄甥关系
        '侄子,儿子': '侄孙',
        '侄女,儿子': '侄孙',
        '侄子,女儿': '侄孙女',
        '侄女,女儿': '侄孙女',
        '外甥,儿子': '外甥孙',
        '外甥女,儿子': '外甥孙',
        '外甥,女儿': '外甥孙女',
        '外甥女,女儿': '外甥孙女',
        
        // 堂表侄甥关系
        '堂哥/堂弟,儿子': '堂侄',
        '堂姐/堂妹,儿子': '堂侄',
        '堂哥/堂弟,女儿': '堂侄女',
        '堂姐/堂妹,女儿': '堂侄女',
        '表哥/表弟,儿子': '表侄',
        '表姐/表妹,儿子': '表侄',
        '表哥/表弟,女儿': '表侄女',
        '表姐/表妹,女儿': '表侄女'
      }
    }
  },
  created() {
    // 初始化关系示例
    this.relationExamples = this.getRelationExamples();
  },
  // 分享到聊天
  onShareAppMessage() {
    return getShareAppMessageConfig({
      title: '亲戚计算器 - 快速计算复杂的亲戚关系称谓',
      path: '/pages-sub/kin/index',
      imageUrl: '/static/share-img.png'
    });
  },
  // 分享到朋友圈
  onShareTimeline() {
    return getShareTimelineConfig({
      title: '亲戚计算器 - 快速计算复杂的亲戚关系称谓',
      imageUrl: '/static/share-img.png'
    });
  },
  methods: {
    addRelation(relation) {
      if (this.relationPath.length >= 8) {
        uni.showToast({
          title: '最多支持8层关系',
          icon: 'none'
        });
        return;
      }
      
      this.relationPath.push(relation);
      this.resultRelation = '';
    },
    removeLastRelation() {
      if (this.relationPath.length > 0) {
        this.relationPath.pop();
        this.resultRelation = '';
      }
    },
    clearRelations() {
      this.relationPath = [];
      this.resultRelation = '';
    },
    calculateRelation() {
      if (this.relationPath.length === 0) {
        uni.showToast({
          title: '请先选择关系',
          icon: 'none'
        });
        return;
      }
      
      // 简单关系直接返回
      if (this.relationPath.length === 1) {
        this.resultRelation = this.relationPath[0];
        this.saveToHistory();
        return;
      }
      
      // 先检查是否有直接的多级关系映射（完整路径匹配）
      const fullPath = this.relationPath.join(',');
      if (this.relationMap[fullPath]) {
        this.resultRelation = this.relationMap[fullPath];
        this.saveToHistory();
        return;
      }
      
      // 复杂关系计算
      let currentRelation = '';
      
      // 逐步计算关系链
      for (let i = 0; i < this.relationPath.length - 1; i++) {
        // 第一步关系
        if (i === 0) {
          const firstPair = `${this.relationPath[0]},${this.relationPath[1]}`;
          if (this.relationMap[firstPair]) {
            currentRelation = this.relationMap[firstPair];
          } else {
            // 检查是否有配偶关系
            const spousePair = this.checkSpouseRelation(this.relationPath[0], this.relationPath[1]);
            if (spousePair) {
              currentRelation = spousePair;
            } else {
              this.resultRelation = '未知关系';
              this.saveToHistory();
              return;
            }
          }
          
          // 如果只有两级关系，直接返回结果
          if (this.relationPath.length === 2) {
            this.resultRelation = currentRelation;
            this.saveToHistory();
            return;
          }
          
          continue;
        }
        
        // 后续关系链处理
        if (currentRelation && i + 1 < this.relationPath.length) {
          const nextRelationPair = `${currentRelation},${this.relationPath[i+1]}`;
          
          // 检查是否有映射关系
          if (this.relationMap[nextRelationPair]) {
            currentRelation = this.relationMap[nextRelationPair];
          } else {
            // 检查是否有配偶关系
            const spousePair = this.checkSpouseRelation(currentRelation, this.relationPath[i+1]);
            if (spousePair) {
              currentRelation = spousePair;
            } else {
              // 尝试拆解复杂关系
              const fallbackPair = `${this.relationPath[i]},${this.relationPath[i+1]}`;
              if (this.relationMap[fallbackPair]) {
                // 如果能找到直接映射，使用该映射结果
                currentRelation = this.relationMap[fallbackPair];
              } else {
                this.resultRelation = '未能识别的复杂关系';
                this.saveToHistory();
                return;
              }
            }
          }
        }
      }
      
      this.resultRelation = currentRelation || '未知关系';
      this.saveToHistory();

    },
    saveToHistory() {
      try {
        // 获取现有历史记录
        let history = uni.getStorageSync('kin_history') || [];
        
        // 添加新记录
        const newRecord = {
          path: this.relationPath.join(' → '),
          result: this.resultRelation,
          timestamp: Date.now()
        };
        
        // 限制历史记录数量
        history.unshift(newRecord);
        if (history.length > 20) {
          history = history.slice(0, 20);
        }
        
        // 保存回本地存储
        uni.setStorageSync('kin_history', history);
      } catch (e) {
        console.error('保存历史记录失败', e);
      }
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
    },
    
    // 辅助方法：检查是否有直接的多级关系映射
    checkDirectMultiLevelRelation() {
      // 对于三级或更多级关系，检查是否有直接映射
      if (this.relationPath.length >= 3) {
        const fullPath = this.relationPath.join(',');
        if (this.relationMap[fullPath]) {
          return this.relationMap[fullPath];
        }
      }
      return null;
    },
    
    // 辅助方法：检查配偶关系
    checkSpouseRelation(relation1, relation2) {
      // 检查是否是配偶关系
      const spousePair = `${relation1},${relation2}`;
      if (this.relationMap[spousePair]) {
        return this.relationMap[spousePair];
      }
      
      // 检查反向配偶关系
      if (relation2 === '丈夫' || relation2 === '妻子') {
        const reversePair = `${relation1},${relation2}`;
        if (this.relationMap[reversePair]) {
          return this.relationMap[reversePair];
        }
      }
      
      return null;
    },
    
    // 辅助方法：获取关系示例
    getRelationExamples() {
      return [
        { path: '爸爸的爸爸', result: '爷爷' },
        { path: '妈妈的爸爸', result: '外公' },
        { path: '爸爸的妹妹', result: '姑姑' },
        { path: '妈妈的妹妹', result: '阿姨' },
        { path: '妹妹的儿子', result: '外甥' },
        { path: '妹妹的女儿', result: '外甥女' },
        { path: '外公的妻子', result: '外婆' },
        { path: '爸爸的哥哥', result: '伯父' },
        { path: '爸爸的弟弟', result: '叔叔' },
        { path: '妈妈的哥哥', result: '舅舅' }
      ];
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  position: relative;
  overflow: hidden;
}

.header-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16rpx;
  background: linear-gradient(90deg, #ff6b6b, #ffa06b);
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
  display: block;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
  display: block;
}

.calculator-card, .info-card, .common-relations-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  border-bottom: 1px solid #eee;
  padding-bottom: 20rpx;
}

.card-title text {
  font-size: 32rpx;
  font-weight: bold;
}

.share-btn {
  background-color: #ff6b6b;
  color: white;
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  line-height: 1.5;
  height: auto;
}

.relation-container {
  background-color: #f9f9f9;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.relation-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 80rpx;
}

.relation-item {
  display: flex;
  align-items: center;
  margin: 10rpx 0;
}

.relation-text {
  background-color: #e6f7ff;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  color: #1890ff;
  font-size: 28rpx;
}

.relation-arrow {
  margin: 0 10rpx;
  color: #999;
}

.result-display {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1px dashed #ddd;
}

.result-label {
  font-size: 28rpx;
  color: #666;
}

.result-value {
  font-size: 36rpx;
  color: #ff6b6b;
  font-weight: bold;
  margin-left: 10rpx;
}

.relation-selector {
  margin-bottom: 30rpx;
}

.selector-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.relation-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.relation-btn {
  background-color: #f0f0f0;
  color: #333;
  font-size: 28rpx;
  padding: 15rpx 25rpx;
  border-radius: 8rpx;
  margin: 0;
  flex: 0 0 calc(25% - 20rpx);
  text-align: center;
  line-height: 1.5;
  height: auto;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.btn-action {
  flex: 1;
  font-size: 28rpx;
  padding: 20rpx 0;
  border-radius: 8rpx;
  line-height: 1.5;
  height: auto;
}

.btn-clear {
  background-color: #f0f0f0;
  color: #666;
}

.btn-delete {
  background-color: #ffd8d8;
  color: #ff6b6b;
}

.btn-calculate {
  background-color: #ff6b6b;
  color: white;
}

.info-content {
  display: flex;
  flex-direction: column;
}

.info-text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  line-height: 1.5;
}

.relations-table {
  border: 1px solid #eee;
  border-radius: 8rpx;
}

.relation-row {
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid #eee;
}

.relation-row:last-child {
  border-bottom: none;
}

.relation-example-path {
  flex: 1;
  font-size: 28rpx;
  color: #666;
}

.relation-example-result {
  font-size: 28rpx;
  color: #ff6b6b;
  font-weight: bold;
}

.disclaimer {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  padding: 30rpx 0;
}
</style>